<form
  role="form"
  name="queryBarForm"
  ng-submit="queryBar.submit()"
>
  <kbn-typeahead
    items="queryBar.suggestions"
    item-template="queryBar.suggestionTemplate"
    on-select="queryBar.onSuggestionSelect(item)"
    class="suggestionTypeahead"
  >
    <div
      class="kuiLocalSearch"
      role="search"
    >

      <div class="kuiLocalSearchAssistedInput">
        <!-- Lucene input -->
        <input
          ng-if="queryBar.localQuery.language === 'lucene'"
          parse-query
          input-focus
          disable-input-focus="queryBar.disableAutoFocus"
          kbn-typeahead-input
          ng-change="queryBar.updateSuggestions()"
          ng-model="queryBar.localQuery.query"
          placeholder="Search... (e.g. status:200 AND extension:PHP)"
          aria-label="Search input"
          aria-describedby="discoverLuceneSyntaxHint"
          type="text"
          class="kuiLocalSearchInput"
          ng-class="{'kuiLocalSearchInput-isInvalid': queryBarForm.$invalid}"
          data-test-subj="queryInput"
        >

        <!-- kuery input -->
        <input
          ng-if="queryBar.localQuery.language === 'kuery'"
          ng-model="queryBar.localQuery.query"
          ng-model-options="{ debounce: 100 }"
          ng-trim="false"
          ng-keydown="queryBar.handleKeyDown($event)"
          ng-change="queryBar.updateSuggestions()"
          ng-click="queryBar.updateSuggestions()"
          input-focus
          match-pairs
          disable-input-focus="queryBar.disableAutoFocus"
          kbn-typeahead-input
          placeholder="Search... (e.g. status:200 AND extension:PHP)"
          aria-label="Search input"
          aria-describedby="discoverKuerySyntaxHint"
          type="text"
          class="kuiLocalSearchInput"
          ng-class="{'kuiLocalSearchInput-isInvalid': queryBarForm.$invalid}"
          data-test-subj="queryInput"
        />
        <div class="kuiLocalSearchAssistedInput__assistance">
            <query-popover
              language="queryBar.localQuery.language"
              on-select-language="queryBar.selectLanguage($language)"
            ></query-popover>
        </div>
      </div>

      <button
        type="submit"
        aria-label="Search"
        class="kuiLocalSearchButton"
        ng-disabled="queryBarForm.$invalid"
        data-test-subj="querySubmitButton"
      >
        <span class="fa fa-search" aria-hidden="true"></span>
      </button>
    </div>
  </kbn-typeahead>
</form>
